<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <title>csgmap-psr-menus</title>
    <style>
        html,
        body,
        #mapui {
            width: 100%;
            height: 100%;
        }
        
        html,
        body {
            margin: 0;
            padding: 0;
        }
        
        #button11 {
            position: fixed;
            bottom: 40px;
            left: 0px;
            z-index: 2000;
        }
        
        #button11 input {
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="mapui"></div>
    <div id="button11">
        <input id="zoomInSVG" type="button" value="放大">
        <input id="zoomOutSVG" type="button" value="缩小">
        <input onclick="openSvg()" type="button" value="打开svg">
        <input onclick="closeSvg()" type="button" value="关闭svg">
        <input onclick="testFun()" type="button" value="解析">
        <input onclick="searc()" type="button" value="搜索">
        <input onclick="locatio()" type="button" value="停复电着色">
        <input onclick="locatio1()" type="button" value="取消停复电着色">
    </div>
    <script src="./js_example/script/map.min.js"></script>
    <script src="./js_example/script/psr.min.js"></script>
    <script src="./js_example/script/demo.js"></script>
    <!-- 
    <script src="http://172.16.69.86:7003/psrassets/massets/map.min.js"></script>
    <script src="http://172.16.69.86:7003/psrassets/massets/psr.min.js"></script> -->
    <!-- <script src="http://172.16.69.86:7003/psrassets/massets/style_basic.js"></script> -->
    <script>
        var amap = null;
        var psrmap = null;
        var init = false;
        var svg = null;

        // map.Config.SERVICE_URL = "http://172.16.119.77:18081/service";
        map.Config.MineAccessToken = "9d7450722a8448d6b9087f68e2444ebf";
        map.Config.BaseUrl = "http://172.16.119.77:18081/";
        map.Config.SRC_URL = "http://172.16.119.77:18081//minemapapi/v2.0.0/";
        map.Config.API_URL = "http://172.16.119.77:18081//data";
        map.Config.DYN_URL = "http://172.16.119.77:18081//dynamicdata";
        map.Config.MERGE_URL = "http://172.16.119.77:18081//mergeddata";
        map.Config.OTHER_URL = "http://172.16.119.77:18081//otherdata";
        map.Config.REQUIRE_ACCESS_TOKEN = true;
        map.Config.DATA_VERSION = "";
        map.Config.SERVICE_VERSION = 3.1;
        // style = "http://172.16.119.77:18081/service/solu/style/id/12730";
        // style = "minemap://service/solu/style/id/12730",
        //http://172.16.119.77:18081/operate/mapstyle/view?solution=12730&appKey=9d7450722a8448d6b9087f68e2444ebf
        map.Factory.create('mapui', {
            style: style,
            center: center,
            zoom: 5,
            strategy: ['mapboxgl', 'openlayers', 'leaflet'],
        }, (o) => {
            amap = o;
            init = true;
            this.addPSR();
        });
        psr.Config
        psr.Identify.connect();

        function addPSR() {
            let self = this;
            let str = '';
            this.psrmap = new psr.PSRMap(this.amap.pmap);
            this.psrmap.on('feafureClicked', function(e) {
                console.log(e);
                let menus = self.psrmap.getContextmenu(e[0], 'geomap');
                console.log('menus', menus);
                for (let i = 0; i < menus.length; i++) {
                    if (menus[i].name == '站内图') {
                        svg = new psr.PSRThematic.Substation();

                    }
                    if (menus[i].name == '单线图') {
                        svg = new psr.PSRThematic.SingleLine();

                    }
                }

            });
            this.psrmap.addPSR([], ['Microsoft YaHei UI Regular']);
            this.psrmap.on("load", function(e) {
                console.log("图层初始化完成");
            });
        }

        function openSvg() {

            svg = new psr.PSRThematic.SingleLine();

            svg.open("358220381392000", function(result) { //357000000000301  357000000059401

                var mql = window.matchMedia('(orientation: portrait)');

                function onMatchMediaChange(mql) {
                    svg.changeScreenSize();
                }
                // 监听屏幕模式变化
                mql.addListener(onMatchMediaChange);

            });
            svg.on("click", function(e) {
                console.log(JSON.stringify(e));
            })
        }

        function closeSvg() {
            // this.psrmap.locateDevices([357220045021000], {
            //     hightlight: true
            // });

            // 357115529046801
            svg.close();
        }

        function testFun() {
            svg.getDeviceList([141, 142, 143, 144, 145, 339, 340, 342, 343, 433], function(data) {
                console.log(JSON.parse(data))
            });
        }

        function searc() {
            svg.searchDevice([141, 142, 143, 144, 145, 339, 340, 342, 343, 433], 'z', function(res) {
                let data = JSON.parse(res)
                console.log(JSON.stringify(data.replyData))
            });
        }

        function locatio() { //
            let ss = [{
                "devid": "357000176045101",
                "normal_pos": false
            }, {
                "devid": "357000176045001",
                "normal_pos": false
            }, {
                "devid": "357001513717601",
                "normal_pos": false
            }, {
                "devid": "357115534775701",
                "normal_pos": false
            }, {
                "devid": "357115534646701",
                "normal_pos": false
            }, {
                "devid": "357115535140501",
                "normal_pos": false
            }, {
                "devid": "357115534979801",
                "normal_pos": false
            }, {
                "devid": "357115534979701",
                "normal_pos": false
            }, {
                "devid": "357115535140401",
                "normal_pos": false
            }, {
                "devid": "357115534979901",
                "normal_pos": false
            }, {
                "devid": "358220758835500",
                "normal_pos": false
            }, {
                "devid": "358220758880100",
                "normal_pos": false
            }, {
                "devid": "358220072901800",
                "normal_pos": false
            }, {
                "devid": "358220837281200",
                "normal_pos": false
            }, {
                "devid": "358220758879500",
                "normal_pos": false
            }, {
                "devid": "358220837281900",
                "normal_pos": false
            }, {
                "devid": "358220758822900",
                "normal_pos": false
            }, {
                "devid": "357001513720601",
                "normal_pos": false
            }, {
                "devid": "358220837283200",
                "normal_pos": false
            }, {
                "devid": "357001513720501",
                "normal_pos": false
            }, {
                "devid": "358220758879100",
                "normal_pos": false
            }, {
                "devid": "358220758835900",
                "normal_pos": false
            }, {
                "devid": "358220077135300",
                "normal_pos": false
            }, {
                "devid": "358220758841900",
                "normal_pos": false
            }, {
                "devid": "358220077134300",
                "normal_pos": false
            }, {
                "devid": "357001513718901",
                "normal_pos": false
            }, {
                "devid": "357001513718801",
                "normal_pos": false
            }, {
                "devid": "358220758841100",
                "normal_pos": false
            }, {
                "devid": "358220758822400",
                "normal_pos": false
            }];
            // console.log(JSON.parse(ss))
            let param = [{
                devid: '357001583116901',
                normal_pos: false
            }, {
                devid: '357001583116601',
                normal_pos: false
            }, {
                devid: '357001583116701',
                normal_pos: false
            }, {
                devid: '357001583116801',
                normal_pos: true
            }, {
                devid: '357115837322201',
                normal_pos: true
            }];

            svg.multiDeviceColoring(ss, function(res) {

            })

        }

        function locatio1() {
            svg.reMultiDeviceColoring();
            // svg.zoomToSvgDevice('362222315066600', 10); //359222761542900  359222890621700   359222890559600  359221794840500
        }
    </script>
</body>

</html>